@import "../palette/palette";
@import "../animation/animation";


.wsk-ripple {
  background       : $ripple-bg-color;
  border-radius    : 50%;
  height           : 50px;
  left             : 0;
  opacity          : 0;
  pointer-events   : none;
  position         : absolute;
  top              : 0;
  transform        : translate(-50%, -50%);
  width            : 50px;
  overflow         : hidden;

  &.is-animating {
    transition: transform 0.6s $animation-curve-linear-out-slow-in,
    width 0.6s $animation-curve-linear-out-slow-in,
    height 0.6s $animation-curve-linear-out-slow-in,
    opacity 0.6s $animation-curve-linear-out-slow-in;
  }
}
